import React, { PureComponent } from "react";
import store from "../store";
import {
  getInputChangeAction,
  getBtnClickAction,
  getDeleteItemAction,
  InitStateAction,
  getInitList,
  get,
} from "../action";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    store.subscribe(this.stateChange);
  }
  //   状态改变的 处理函数
  stateChange = () => {
    this.setState(store.getState());
  };

  //   store.subscribe(this.stateChange)
  handleChange = (e) => {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  };
  handleButton = () => {
    const action = getBtnClickAction();
    store.dispatch(action);
  };
  render() {
    return (
      <React.Fragment>
        <input value={this.state.inputValue} onChange={this.handleChange} />
        <button onClick={this.handleButton}>提交</button>
        {this.state.list.map((item, index) => (
          <li
            onClick={() => {
              store.dispatch(getDeleteItemAction(index));
            }}
            key={item}
          >
            {item}
          </li>
        ))}
      </React.Fragment>
    );
  }
}
export default App;
